<template>
  <div class="image-marker">
    <div ref="imageContainer">
      <img :src="this.src" @load="onImageLoad" />
      <canvas ref="markerCanvas" width="700px"
              height="400px" @mousedown="onMouseDown" @mousemove="onMouseMove" @mouseup="onMouseUp" @mouseleave="onMouseLeave"></canvas>
    </div>
    <p>Coordinates: {{ coordinates }}</p>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: '',
    },
    initialPositions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      isMarking: false,
      markerColor: 'red',
      markerRadius: 10,
      markers: [],
      coordinates: undefined,
      canvasWidth: 0,
      canvasHeight: 0,
      // initialPositions: [337, 176, 166, 206, 497, 143, 498, 143, 499, 143, 545, 274, 545, 275, 545, 276, 435, 351],
    };
  },
  mounted() {
    // 移除这里的逻辑，等待图像加载完成后执行
  },
  methods: {
    onImageLoad(event) {

      // 获取图片的实际宽度和高度
      const imgElement = event.target;
      this.canvasWidth = imgElement.naturalWidth;
      this.canvasHeight = imgElement.naturalHeight;

      // 更新 canvas 的尺寸
      this.$refs.markerCanvas.width = this.canvasWidth;
      this.$refs.markerCanvas.height = this.canvasHeight;



      // this.canvasWidth = this.$refs.imageContainer.clientWidth;
      // this.canvasHeight = this.$refs.imageContainer.clientHeight;
      // this.$refs.markerCanvas.width = this.canvasWidth;
      // this.$refs.markerCanvas.height = this.canvasHeight;

      // 设置画布样式
      this.$refs.imageContainer.style.position = 'relative';
      this.$refs.markerCanvas.style.position = 'absolute';
      this.$refs.markerCanvas.style.left = '0';
      this.$refs.markerCanvas.style.top = '0';

      // 处理 initialPositions
      let i = 0;
      while (i < this.initialPositions.length) {
        const x = this.initialPositions[i];
        const y = this.initialPositions[i + 1];
        if (x !== undefined && y !== undefined) {
          this.drawMarker({ x, y });
          i += 2;
        } else {
          break;
        }
      }
    },
    onMouseDown(event) {
      event.preventDefault();
      this.isMarking = true;
      if (this.isMarking) {
        this.drawMarker(event);
      }
    },
    onMouseMove(event) {
      if (this.isMarking) {
        this.drawMarker(event);
      }
    },
    onMouseUp() {
      this.isMarking = false;
    },
    onMouseLeave() {
      this.isMarking = false;
    },
    drawMarker(eventOrPosition) {
      const ctx = this.$refs.markerCanvas.getContext('2d');
      let x, y;

      // 如果参数是 Event，则获取 offset 坐标
      if (eventOrPosition instanceof Event) {
        x = eventOrPosition.offsetX;
        y = eventOrPosition.offsetY;
      } else { // 如果参数是 { x, y } 对象，则直接使用
        x = eventOrPosition.x;
        y = eventOrPosition.y;
      }

      ctx.beginPath();
      ctx.arc(x, y, this.markerRadius, 0, Math.PI * 2);
      ctx.fillStyle = this.markerColor;
      ctx.fill();
      this.markers.push({ x, y });
      this.updateCoordinates();
    },
    updateCoordinates() {
      this.coordinates = this.markers.map(marker => [marker.x, marker.y]).join(', ');
      this.$emit('coordinates', this.coordinates);
    },
    clearCanvas() {
      const ctx = this.$refs.markerCanvas.getContext('2d');
      ctx.clearRect(0, 0, this.$refs.markerCanvas.width, this.$refs.markerCanvas.height);
      this.markers = [];
      this.coordinates = '[]';
    }
  }
}
</script>

<style scoped>
.image-marker {
  display: block;
  width: 100%;
  height: 100%;
}
.image-marker img {
  width: 100%;
  height: 100%;
}
</style>